import React, { Component, memo } from 'react'
import styles from '../../../../../styles/Home/Housing.module.scss'
import Sanjiao from '../../../../../image/sanjiao.png'
import Zujing from '../../../window/Zujing'


class Housing extends Component {
    state = {
        show: false
    }

    handleClick = (params) => {
        this.setState({
            show: !this.state.show,
        })
    }

    render() {
        return (
            <div className={styles.Housing}>
                <h1>最新房源</h1>
                <div className={styles.getHousing}>
                    <div className={styles.area}>
                        <span className={styles.yu}>区域</span>
                        <img src={Sanjiao} className={styles.sanjiao} alt="" />
                    </div>
                    <div className={styles.shu}></div>
                    <div className={styles.area} onClick={this.handleClick}>
                        <span className={styles.yu}>租金</span>
                        <img src={Sanjiao} className={styles.sanjiao} alt="" />
                    </div>
                    <div className={styles.shu}></div>
                    <div className={styles.area}>
                        <span className={styles.yu}>排序</span>
                        <img src={Sanjiao} className={styles.sanjiao} alt="" />
                    </div>
                    <div className={styles.shu}></div>
                    <div className={styles.area}>
                        <span className={styles.yu}>更多</span>
                        <img src={Sanjiao} className={styles.sanjiao} alt="" />
                    </div>
                </div>
                <Zujing show={this.state.show}></Zujing>

            </div>
        )
    }
}

export default memo(Housing)
